@charset "utf-8";
*{
     margin:0px;
     padding:0px;
     box-sizing:border-box;
     -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
     opacity: 1;
     -webkit-backface-visibility: hidden;
}
body{
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft Yahei, Helvetica Neue, Roboto, Segoe UI, sans-serif;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    touch-callout:none;
}
html , body , .page_box{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;

    width:100%;
    height:100%;
    overflow:hidden;
    z-index: 1;
}
html , body{
    position:relative;
    font-size: 100%;
}
.page_box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: url(../images/bj-line.jpg);
}
/* .page{ background:url() repeat-y; background-size:100%;} */
.page{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
    flex: 1;

}
.page.hide{ display:none;}

/*==================================*/

.page.inTop{
    -webkit-animation:ShowTop .5s ease both;
    animation:ShowTop .5s ease both;
}
.page.outTop{
    -webkit-animation:HideTop .5s ease both;
    animation:HideTop .5s ease both;
}
.page.inDown{

    -webkit-animation:ShowDown .5s ease both;
    animation:ShowDown .5s ease both;
}
.page.outDown{
    -webkit-animation:HideDown .5s ease both;
    animation:HideDown .5s ease both;
}
@-webkit-keyframes ShowTop{
	0%{ will-change: transform;-webkit-transform:translateY(100%);}
	100%{ will-change: transform;-webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ will-change: transform;transform:translateY(100%);}
	100%{ will-change: transform;transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ will-change: transform;-webkit-transform:translateY(0);}
	100%{ will-change: transform;-webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ will-change: transform;transform:translateY(0);}
	100%{ will-change: transform;transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ will-change: transform;-webkit-transform:translateY(-100%);}
	100%{ will-change: transform;-webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ will-change: transform;transform:translateY(-100%);}
	100%{ will-change: transform;transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ will-change: transform;-webkit-transform:translateY(0);}
	100%{ will-change: transform;-webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ will-change: transform;transform:translateY(0);}
	100%{ will-change: transform;transform:translateY(100%);}
}

/**向上箭头样式**/

.arrow{
    width: 0.65rem;
    height: 0.65rem;
    text-align:center;
    position:absolute;
    left:50%;
    margin-left: -0.325rem;
    bottom:0.4rem;
    -webkit-animation:arrow 1.6s .5s ease-in-out infinite;
    animation:arrow 1.6s .5s ease-in-out infinite;
    z-index: 999;
}
@-webkit-keyframes arrow{
	0%{ -webkit-transform:translateY(0); opacity:0;}
	50%{ -webkit-transform:translateY(-50%); opacity:1}
	60%{ -webkit-transform:translateY(-40%); opacity:1}
	90%{ -webkit-transform:translateY(-30%); opacity:1}
	100%{ -webkit-transform:translateY(0); opacity:0}
}
@keyframes arrow{
	0%{ transform:translateY(0); opacity:0;}
	50%{ transform:translateY(-50%); opacity:1}
	100%{ transform:translateY(0); opacity:0}
}
.arrow img{
    width: 100%;
    height: 100%;
}

/**页面内容样式**/
/* .logo{
    width: 1.4rem;
    height: 0.44rem;
    position: absolute;
    top:1.68rem;
    left: 0.3rem;
    z-index: 999;
    background: url(../images/logo.png) no-repeat;
    background-size: 1.4rem 0.44rem;
} */
.logo{
    width: 1.4rem;
    height: 0.44rem;
    position: absolute;
    top:1.5rem;
    left: 50%;
    margin-left: -0.7rem;
    z-index: 999;
    background: url(../images/logo.png) no-repeat;
    background-size: 1.4rem 0.44rem;
}
.logo img{
    width: 100%;
    height: 100%;
    vertical-align: top;
}
.h5-header{
    width:100%;
    height: 0.88rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}
.h5-header-center{
    font-size: 0.34rem;
    color:#fff;
}

.cotent{
    width: 100%;
    height: 100%;
}
.cotent1{
    background-size:100% 100% !important;
    background-position: 100% 100% !important;
    background-attachment:fixed !important;
}
.page-top{
    width: 5.12rem;
    height: 4.43rem;
    position: absolute;
    top:0;
    left:0;
    z-index: 10;
    background: url(../images/top.png) no-repeat;
    background-size: 5.12rem 4.43rem;
}
.page1-bottom{
    width: 7.5rem;
    height: 8.39rem;

    position: absolute;
    left:0;
    bottom: 0;
}
.page-right{
    position: absolute;
    right:0;
    top:0.9rem;
    z-index: 10;
}
.page1-right{
    width: 1.44rem;
    height: 1.94rem;
    background: url(../images/bgc1-right.png) no-repeat;
    background-size: 1.44rem 1.94rem;
}
.page2-right{
    width: 3.84rem;
    height: 4.9rem;
    background: url(../images/decorate01.png) no-repeat;
    background-size: 3.84rem 4.9rem;
}
.page3-right{
    width: 3.84rem;
    height: 4.9rem;
    background: url(../images/decorate02.png) no-repeat;
    background-size: 3.84rem 4.9rem;
}
.page4-right{
    top: 1.6rem;
}
.cotent{
    background-size: cover !important;
    background-position: 100% 100% !important;
    background-attachment:fixed !important;
}

/* page1 */

.page1-bottom-text{
    min-width: 2.6rem;
    position: absolute;
    bottom: 1.18rem;
    left: 50%;
    margin-left: -1.3rem;
    padding: 0.08rem 0;
    text-align: center;
    font-size: 0.24rem;
    border-radius: 0.05rem;
    color: #3c07a7;
    background-color: rgba(255,255,255,.7);
    z-index: 999;
}

.page-content{
    position: absolute;
    top:2rem;
    left:0.7rem;
    z-index: 999;
    font-weight: lighter !important;
}
.page-content1{
    position: absolute;
    top:2rem;
    left:0.7rem;
    z-index: 999;
}
.page-content-text{
    max-width: 6rem;
    margin-bottom: 0.34rem;
    font-size: 0.34rem;
    color: #fff;
}
.page-content-text-height{
    line-height: 0.55rem;
    margin-bottom: 0;
}
.page-content-text-bottom{
    margin-bottom: 0.26rem;
}
.page-content-text-height-bottom{
    margin-bottom: 0.16rem;
}
.page-content-text:last-child{
    margin-bottom: 0;
}
.page1-content-text{
    font-size: 0.34rem;
}
.page1-content-text:nth-child(1){
    -webkit-animation:fadeLeftPage3 .8s .7s ease-in-out both;
    animation:fadeLeftPage3 .8s .7s ease-in-out both;
}
.page1-content-text:nth-child(2){
    -webkit-animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
}
.page1-content-text:nth-child(3){
    -webkit-animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
}

@-webkit-keyframes fadeRightTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}


/* page2 */
/* .page2-content-text{
    -webkit-animation:opacityTan .8s .2s ease-in-out both;
    animation:opacityTan .8s .2s ease-in-out both;
}
@-webkit-keyframes opacityTan{
	0%{ opacity:0;}
	50%{ opacity:.5;}
	100%{  opacity:1;}
}
@keyframes opacityTan{
	0%{ opacity:0;}
	50%{ opacity:.5;}
	100%{  opacity:1;}
} */


.page2-content-text:nth-child(1){
    -webkit-animation:fadeLeftPage3 .8s .7s ease-in-out both;
    animation:fadeLeftPage3 .8s .7s ease-in-out both;
}
.page2-content-text:nth-child(2){
    -webkit-animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
}
.page2-content-text:nth-child(3){
    -webkit-animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
}
.page2-content-text:nth-child(4){
    -webkit-animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
}
@-webkit-keyframes fadeRightPage2{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightPage2{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
/* .page2 .page2-content-text:nth-child(4){
    -webkit-animation:fadeLeftPage3 .8s 1s ease-in-out both;
    animation:fadeLeftPage3 .8s 1s ease-in-out both;
} */
@-webkit-keyframes fadeLeftPage2{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeLeftPage2{
	0%{ transform:translateX(-100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}


/* page3 */

.time-num{
    position: absolute;
    width: 0.21rem;
    height: 0.39rem;
    z-index: 9999;
}
.home-hours-time-num{
    bottom: 2.45rem;
    left: 0.78rem;
}
.maohao-time-num{
    left: 1.03rem;
    bottom: 2.3rem;
}
.home-minute-time-num{
    left:1.23rem;
    bottom:2.2rem;
}
.home-second-time-num{
    left: 1.44rem;
    bottom: 2.08rem;
}

.company-hours-time-num1{
    right:1.55rem;
    bottom: 4.11rem;
}
.company-hours-time-num2{
    right: 1.35rem;
    bottom: 4rem;
}
.maohao-company-time-num{
    right:1.15rem;
    bottom: 3.9rem;
}

.company-minute-time-num{
    right:0.91rem;
    bottom: 3.78rem;
}
.company-second-time-num{
    bottom: 3.66rem;
    right:0.7rem;
}

.page3 .time-num{
    -webkit-animation:fadeLeftPage3 .8s .2s ease-in-out both;
    animation:fadeLeftPage3 .8s .2s ease-in-out both;
}
/* .page3 .page3-content-text{
    -webkit-animation:fadeLeftPage3 .8s .2s ease-in-out both;
    animation:fadeLeftPage3 .8s .2s ease-in-out both;
} */
.page3-content-text:nth-child(1){
    -webkit-animation:fadeLeftPage3 .8s .7s ease-in-out both;
    animation:fadeLeftPage3 .8s .7s ease-in-out both;
}
.page3-content-text:nth-child(2){
    -webkit-animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
}
.page3-content-text:nth-child(3){
    -webkit-animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
}
.page3-content-text:nth-child(4){
    -webkit-animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
}
.page3-content-text:nth-child(5){
    -webkit-animation:fadeLeftPage3 .8s 2.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 2.7s ease-in-out both;
}
@-webkit-keyframes fadeLeftPage3{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeLeftPage3{
	0%{ transform:translateY(100%); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}

/* page4 */
/* .page4 .page-content-text-bottom{
    -webkit-animation:fadeLeftPage3 .5s .2s ease-in-out both;
    animation:fadeLeftPage3 .5s .2s ease-in-out both;
} */
.page4-content-text{
    -webkit-animation:fadeLeftPage3 .8s .7s ease-in-out both;
    animation:fadeLeftPage3 .8s .7s ease-in-out both;
}
.page4-content-text:nth-child(2){
    -webkit-animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.2s ease-in-out both;
}
.page4-content-text:nth-child(3){
    -webkit-animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 1.7s ease-in-out both;
}
.page4-content-text:nth-child(4){
    -webkit-animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 2.2s ease-in-out both;
}
.page4-content-text:nth-child(5){
    -webkit-animation:fadeLeftPage3 .8s 2.7s ease-in-out both;
    animation:fadeLeftPage3 .8s 2.7s ease-in-out both;
}
.page4-content-text:nth-child(6){
    -webkit-animation:fadeLeftPage3 .8s 3.2s ease-in-out both;
    animation:fadeLeftPage3 .8s 3.2s ease-in-out both;
}
@-webkit-keyframes fadeLeftPage4{
	0%{ -webkit-transform:scale(.5); opacity:.5;}
	50%{ -webkit-transform:scale(.8); opacity:.8;}
	80%{ -webkit-transform:scale(.9); opacity:.9;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeLeftPage4{
	0%{ transform:scale(.5); opacity:.5;}
	50%{ transform:scale(.7); opacity:.7;}
	80%{ transform:scale(.9); opacity:.9;}
	100%{ transform:scale(1); opacity:1;}
}
/* page5 */

/* page6 */
.bj_panel_end{
    position: relative;
    width: 6.5rem;
    height: 7.16rem;
    position: absolute;
    left:50%;
    /* bottom:4.1rem; */
    top:2.07rem;
    margin-left: -3.25rem;
    background-size:100% 100% !important;
    background-position: 100% 100% !important;
    z-index: 999;
}
.bj_panel_end1{
    background: url(../images/bj_panel_end1.png) no-repeat;
}
.bj_panel_end2{
    background: url(../images/bj_panel_end2.png) no-repeat;
}
.bj_panel_end3{
    background: url(../images/bj_panel_end3.png) no-repeat;
}
.bj_end_button{
    width: 3.08rem;
    height: 0.88rem;
    position: absolute;
    /* bottom: 2.5rem; */
    top:9.96rem;
    z-index: 999;
}
.bj_end_button1{
    left:0.5rem;
}
.bj_end_button2{
    right: 0.5rem;
}
.bj_panel_end .title{
    text-align: center;
    margin-top: 2.9rem;
    font-size: 0.22rem;
    color: #fff;
}
.bj_panel_end .keyword{
    margin-top: 0.25rem;
    text-align: center;
    font-size: 0.26rem;
    color:#fff;
}
.bj_panel_end .keyword-text{
    margin-top: 0.42rem;
    text-align: center;
    font-size: 0.72rem;
}
.keyword-text1{
    color:#0efefa;
}
.keyword-text2{
    color:#ffd71b;
}
.keyword-text3{
    color:#23d3ff;
}
.bj_panel_end .desc{
    position: absolute;
    left:0.32rem;
    top:5.5rem;
    max-width: 5.86rem;
    line-height: 0.42rem;
    font-size: 0.26rem;
    color:#fff;
}
.bj_panel_end .bj_end_bar{
    position: absolute;
    bottom: 0;
    left:0;
    width: 6.5rem;
    height: 0.89rem;
}
.inscription{
    width: 100%;
    position: absolute;
    left:50%;
    /* bottom: 1.63rem; */
    top:11.44rem;
    margin-left: -50%;
    text-align: center;
    font-size: 0.28rem;
    color:#9aa6e5;
    z-index: 10;
}
